<template>
  <view :style="colorStyle"> </view>
</template>

<script>
import colors from "@/mixins/color";
import {
  getToken,
  setStorage,
  getStorage,
  getGloBalData,
} from "@/utils/storage.js";
import {
  topicCategoryList,
  topicPushPage,
  userinfo,
  updateParent,
} from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import { loading, go, back } from "@/utils/wxAPI";
import { getEnv } from "../../utils/env";
import { handleLoopCallBack } from "../../utils/util";
export default {
  mixins: [colors],
  components: {},
  data() {
    return {
      menuInfo: {},
      navTitleModuleStyle: "",
      navTitleModuleStyle2: "",
      tablist: [],
      tablistindex: 0,
      list: [],
      total: 0,
      current: 1,
      user: {},
      options: {},
    };
  },
  async onLoad(options) {
    this.options = options;
    // #ifdef MP-WEIXIN
    this.menuInfo = getApp().globalData.menuInfo;
    this.navTitleModuleStyle = `top:${
      this.menuInfo.height + this.menuInfo.top + 10
    }px`;
    this.navTitleModuleStyle2 = `height:calc(${
      this.menuInfo.height + this.menuInfo.top + 10
    }px + 120rpx)`;
    // #endif
    // #ifdef H5
    this.navTitleModuleStyle2 = `height:calc(110rpx + 22rpx + 80rpx)`;
    // #endif

    if (getToken()) {
      this.userinfo();
      await this.topicCategoryList();
      await this.topicPushPage();
      if (this.options.uid) {
        updateParent({
          id: this.options.uid,
        });
      }
    } else {
      handleLoopCallBack(async () => {
        this.userinfo();
        await this.topicCategoryList();
        await this.topicPushPage();
        if (this.options.uid) {
          updateParent({
            id: this.options.uid,
          });
        }
      });
      // #ifdef H5
      if (getEnv() == "H5") {
        uni.reLaunch({
          url: "/pages/login/login",
        });
      }
      // #endif
    }
  },
  async onShow() {
    if (getToken()) {
      if (getStorage("communityRef")) {
        removeStorage("communityRef");
        this.current = 1;
        this.topicPushPage();
      }
    }
  },
  methods: {
    async userinfo() {
      loading();
      let { data } = await userinfo();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.user = info;
      }
      uni.hideLoading();
    },
    tablistChange(index) {
      this.tablistindex = index;
      this.current = 1;
      this.topicPushPage();
    },
    async topicCategoryList() {
      let { data } = await topicCategoryList({
        status: 1,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        data.data.unshift({
          name: "全部",
          id: "",
        });
        this.tablist = data.data;
      }
    },
    async topicPushPage() {
      loading();
      let { data } = await topicPushPage({
        current: this.current,
        size: 10,
        categoryId: this.tablist[this.tablistindex].id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.total = data.data.total;
        let list = data.data.records;
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },
    gourl(url) {
      if (url == "/pages/community/save") {
        // #ifdef MP-WEIXIN
        if (!getGloBalData("is_authorization")) {
          return go(`/pages/reg/reg`);
        }
        // #endif
        // #ifdef H5
        if (getEnv() == "WX_PUBLIC") {
          if (!getStorage("is_authorization")) {
            return go(`/pages/reg/reg`);
          }
        }
        // #endif
      }
      go(url);
    },
    back() {
      back();
    },
  },
  onReachBottom() {
    if (this.list.length == this.total) return;
    this.current += 1;
    this.topicPushPage();
  },
  onPullDownRefresh() {
    this.current = 1;
    this.topicPushPage();
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.infobox1 {
  background: #fff;
  padding: 0 0 22rpx 0;
  position: fixed;
  width: 100%;
  z-index: 99999;
  /* #ifdef H5 */
  height: 88rpx;
  /* #endif */

  .block2 {
    position: absolute;
    bottom: 22rpx;
    left: 30rpx;

    .back {
      width: 48rpx;
      height: 48rpx;
    }

    .headimg {
      width: 64rpx;
      height: 64rpx;
      border-radius: 57rpx;
      margin-left: 10rpx;
    }
  }

  .block1 {
    border-radius: 44rpx;
    background: #f5f5f5;
    width: 360rpx;
    /* #ifdef H5 */
    width: calc(100% - 30rpx - 30rpx - 48rpx - 64rpx - 40rpx);
    /* #endif */
    position: absolute;
    bottom: 18rpx;
    padding: 4rpx;
    left: calc(30rpx + 48rpx + 64rpx + 40rpx);
    height: 64rpx;

    .icon {
      margin-left: 28rpx;
      position: relative;
      top: -4rpx;
    }

    .input {
      margin-left: 16rpx;
    }

    .btn {
      position: absolute;
      right: 0;
      border-radius: 44rpx;
      background: var(--view-theme);
      padding: 15rpx 47rpx;
    }
  }
}

.tabsModule {
  position: fixed;
  width: 100%;
  padding: 22rpx 30rpx 0;
  background: #fff;
  z-index: 99;
  top: 110rpx;
  white-space: nowrap;
  overflow-x: scroll;

  .tablist {
    display: inline-block;
    margin: 0 58rpx 0 0;

    .name {
    }

    .border {
      margin: 18rpx auto 0;
      width: 64rpx;
      height: 4rpx;
      border-radius: 6rpx;
      background: var(--view-theme);
    }
  }
}

.infobox2 {
  margin: 0 30rpx 0;
  position: relative;
  // top: calc(110rpx + 22rpx + 80rpx);

  .list {
    border-radius: 8rpx;
    background: #fff;
    width: 337rpx;
    margin: 0 0 24rpx 0;
    overflow: hidden;

    .img {
      width: 336rpx;
      height: 448rpx;
      border-radius: 8rpx 8rpx 0px 0px;
    }

    .block1 {
      padding: 16rpx;
    }

    .block2 {
      margin: 16rpx;

      .left {
        .icon1 {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
        }

        .name {
          margin-left: 16rpx;
        }
      }

      .right {
        .num {
        }
      }
    }
  }
}

.infobox6 {
  position: fixed;
  width: 100%;
  bottom: 0;
  background: #fff;
  z-index: 99;
  padding-top: 10rpx;
  // padding-bottom: constant(safe-area-inset-bottom);
  // padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: 50rpx;
  /* #ifdef H5 */
  /* #endif */

  .block2 {
    width: 694rpx;

    .info1 {
      color: var(--view-theme);
      background: var(--view-op-ten);
      border-radius: 63rpx;
      padding: 20rpx 54rpx;
      margin: 0 0 0 30rpx;
    }

    .info2 {
      width: 100%;
      background: var(--view-theme);
      border-radius: 63rpx;
      padding: 20rpx 54rpx;
      // margin: 0 0 0 0;
      text-align: center;
    }
  }
}
</style>
